import React, { useContext } from "react";
import { createUseStyles } from "react-jss";
import { Close } from "@ct0/icons";
import { ThemeContext } from "../theme";

interface PanelProps {
  title?: string | React.ReactNode;
  children?: React.ReactNode;
  onClose?: () => void;
}

const useStyles = createUseStyles({
  panel: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
  },
  title: {
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "space-between",
    "&>span": {
      paddingBottom: "12px",
    },
  },
  titleText: {
    color: "#333",
  },
  hr: {
    height: "1px",
    background: "#E9E9E9",
  },
  children: {
    padding: "6px 0",
    boxSizing: "border-box",
    flex: 1,
    overflow: "auto",
  },
  close: {
    cursor: "pointer",
    fontSize: "20px",
    lineHeight: "0",
  },
});

function Panel({ title, children, onClose }: PanelProps) {
  const classes = useStyles();
  const { fontSize } = useContext(ThemeContext);

  return (
    <div className={classes.panel}>
      <div className={classes.title}>
        <span className={classes.titleText} style={{ fontSize }}>
          {title}
        </span>
        <i onClick={onClose} className={classes.close} data-testid="close">
          <Close />
        </i>
      </div>
      <div className={classes.hr}></div>
      <div className={classes.children}>{children}</div>
    </div>
  );
}

export default Panel;
